<template>
  <div>
    <div class="container">
      <!--头部logo-->
      <div class="menu-top">
        <img src="../../assets/images/logo1.png" class="logo">
        <div class="menu-top-right">
          <div class="logo-text">
            <span class="s1">{{$t('document.logoName1')}}</span>
            <span class="s2">{{$t('document.logoName2')}}</span>
            <span class="s3">{{$t('document.logoName3')}}</span>
          </div>
          <div class="mid-right">
            <div><span @click="showCulture(1)" class="culture-text"
                       :class="[ culture==='zh-cn'? 'culture-text-active' : 'text-none']">中文</span>
            </div>
            <p class="shu"></p>
            <div><span @click="showCulture(2)" class="culture-text"
                       :class="[culture==='en-us'  ? 'culture-text-active' : 'text-none']">English</span></div>
          </div>
        </div>
      </div>
      <!--头部导航-->
      <div class="menu">
        <ul class="ul1">
          <li class="li1" @click="showRes(1)" :class="[belong===1 ? 'top-tabs-btn-active':'top-tabs-btn']">
            {{$t('document.introduce')}}
          </li>
          <li @click="showRes(2)" :class="[belong===2 ? 'top-tabs-btn-active':'top-tabs-btn']">
            {{$t('document.useDocument')}}
          </li>
          <li @click="showRes(3)" :class="[belong===3? 'top-tabs-btn-active':'top-tabs-btn']">{{$t('document.case')}}
          </li>
        </ul>
      </div>
      <!--内容主体1-->
      <div id="main1" v-if="belong===3">
        <div class="main-middle1">
          <div class="description">
            <span class="s4">{{$t("document.Case")}}</span>
            <span class="s13">{{$t("document.download")}}</span>
          </div>
          <div class="main-mid">
            <ul class="ulGods">
              <li v-for="item in docdata">
                <div class="d1">
                  <img :src="item.face">
                  <p class="p7">{{item.name}}</p>
                  <a :href="item.material">{{item.intr}}</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--内容主体2-->
      <div id="main2" v-if="belong===2">
        <div class="main-middle2">
          <div class="main-left">
            <div class="descrip">
              <span class="s4">{{$t("document.template")}}</span>
            </div>
            <div class="main-mad">
              <ul class="ul2">
                <li class="myli" v-for="item2 in doctext">
                  <div class="videoname-m"><a :href="item2.explain"><img
                    src="../../assets/images/icon_download_nor.png"></a></div>
                  <div class="videoname-n"><a class="span-text" :href="item2.explain">{{item2.name}}</a>
                  </div>
                </li>
              </ul>
              <div class="bg-login">
                <img src="../../assets/images/bg_login_left.png" id="img5">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--内容主体3-->
      <div id="main3" v-if="belong===1">
        <div class="main-middle3">
          <div class="main-left">
            <div class="descrip">
              <span class="s4">{{$t("document.editorvideo")}}</span>
            </div>
            <div class="d8" @click="showVideo(lis)" v-for="(lis,i) in myVideo">
              <img src="../../assets/images/icon_play_nor.png">
              <div class="videoname-t"><span class="videoname" :class="[videoBelong===1 ? 'active2' : 'none2']">{{lis.name}}</span>
              </div>
            </div>
            <div class="descrip2">
              <span class="s4">{{$t("document.templatevideo")}}</span>
            </div>
            <div class="main-mad">
              <ul class="ul2">
                <li class="myli" v-for="(item3,i) in dataVideo" @click="open(item3,i)">
                  <img src="../../assets/images/icon_play_nor.png">
                  <div class="videoname-t"><span class="videoname" :class="[tapBelong===i ? 'active2' :'non2']"
                                                 id="listName">{{item3.name}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="main-right">
            <div id="d9">
              <span class="videoname2">{{videoName}}</span>
            </div>
            <div class="video-d" id="video-test">
              <video ref="myvideo" id="myvideo" controls preload
                     src="https://vide.mxrcorp.cn/editor/help/videos//20181207175915-9.mp4"></video>
            </div>
          </div>
        </div>
      </div>
      <!--页面底部-->
      <div class="footer">
        <div class="footer-main">
          <div class="foot-left">
            <p class="p2">{{$t("document.contact")}}</p>
            <p class="p3">{{$t("document.companyName")}}</p>
            <p class="p4">{{$t("document.addr")}}</p>
            <p class="p5">{{$t("document.zipCode")}}</p>
            <p class="p6">{{$t("document.phone")}}</p>
          </div>
          <!--中文底部右侧-->
          <div id="foot-right1" v-if="culture==='zh-cn'">
            <div class="top-text">
              <span class="s6">姓名：</span>
              <input type="text" id="myname" class="s7" v-model="name">
              <span class="s8">邮箱：</span>
              <input type="text" id="myemail" class="s9" v-model="email">
              <span class="s10">电话：</span>
              <input type="text" class="s11" v-model="phone">
            </div>
            <div class="mid-xian">
              <div class="xian1"></div>
              <div class="xian2"></div>
              <div class="xian3"></div>
            </div>
            <div class="d5">内容：</div>
            <textarea class="d6" v-model="content"></textarea>
            <div class="d7"></div>
            <input type="button" class="btn-sub" value="提交" @click="subData()">
          </div>
          <!--英文底部右侧-->
          <div id="foot-right2" v-if="culture==='en-us'">
            <div class="top-ext">
              <span class="s12">Send Us a Message</span>
            </div>
            <div class="mid-input">
              <input type="text" class="input-text1" placeholder="Email*" v-model="email">
              <input type="text" class="input-text2" placeholder="Subject" v-model="name">
            </div>
            <div class="mytextarea">
              <textarea class="textarea-input" placeholder="Message" v-model="content"></textarea>
            </div>
            <div class="mybtn">
              <input type="button" class="mybtn-sub" value="Send" @click="subData()">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden='tips'>
      <img :src="resultIcon"/>
      <span>{{msg}}</span>
    </div>
  </div>
</template>

<script>
  import resourceDatas from '../../common/resourceDatas'
  import ajax from '../../common/ajax'
  import api from '../../common/api'

  let language

  export default {
    name: "Document",
    data() {
      return {
        belong: 1,
        culture: '',
        videoName: '',
        videoBelong: 1,
        tapBelong: -1,
        name: '',
        email: '',
        phone: '',
        content: '',
        resultIcon: '',
        msg: '',
        tips: true,
        cansubmit: true
      }
    },
    created() {
      this.culture = this.$route.query.culture
      language = this.$route.query.culture
      this.videoName = '编辑器界面讲解视频'
      if (language === 'zh-cn'){
        this.videoName = '编辑器界面讲解视频'
      }else{
        this.videoName = 'Editor\'s interface to explain the video'
      }
    },
    computed: {
      docdata() {
        return this.culture === 'zh-cn' ? resourceDatas.resource.mydata : resourceDatas.resource.endata
      },
      doctext() {
        return this.culture === 'zh-cn' ? resourceDatas.resource.mytext : resourceDatas.resource.entext
      },
      dataVideo() {
        return this.culture === 'zh-cn' ? resourceDatas.resource.datas : resourceDatas.resource.endatas
      },
      myVideo() {
        return this.culture === 'zh-cn' ? resourceDatas.resource.explain : resourceDatas.resource.enexplain
      }
    },
    methods: {
      subData() {
        let that = this
        let param = {
          name: this.name,
          email: this.email,
          phone: this.phone,
          content: this.content,
          culture: this.culture
        }
        console.log(param)

        if (this.name === "") {
          this.msg = (language === 'zh-cn' ? '请输入姓名' : 'Please enter name')
          this.resultIcon = require("../../assets/images/icon_error.png")
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("myname").focus()
        } else if (this.email === "") {
          this.msg = (language === 'zh-cn' ? '请输入注册邮箱' : 'Please enter email address')
          this.resultIcon = require("../../assets/images/icon_error.png")
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("myemail").focus()
        } else if (this.email.indexOf('@') === -1) {
          this.msg = (language === 'zh-cn' ? '邮箱格式错误！' : 'Wrong Email Format！')
          this.resultIcon = require("../../assets/images/icon_error.png")
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
          document.getElementById("myemail").focus()
        } else if (this.content === "") {
          this.msg = (language === 'zh-cn' ? '请输入内容！' : 'Please enter content！')
          this.resultIcon = require("../../assets/images/icon_error.png")
          this.tips = false
          setTimeout(function () {
            that.tips = true
          }, 1500)
        } else {
          ajax.post({
            url: api.document.routeName + '?r=' + Math.random(),
            data: param,
            success: function (res) {
              that.msg = '提交成功'
              that.resultIcon = require("../../assets/images/ico_success.png")
              that.tips = false
              setTimeout(function () {
                that.tips = true
              }, 1500)
              console.log(res)
            }
          })
        }
      },
      open(item, t) {
        this.$refs.myvideo.src = item.video
        this.videoName = item.name
        this.videoBelong = 2
        this.tapBelong = t
      },
      showVideo(item) {
        this.videoName = item.name
        this.$refs.myvideo.src = item.video
        this.videoBelong = 1
        this.tapBelong = -1
      },
      showCulture(i) {
        if (i === 1) {
          window.location.replace('document?culture=zh-cn')
        } else {
          window.location.replace('document?culture=en-us')
        }
      },
      showRes(i) {
        this.belong = i
      }
    }
  }
</script>

<style scoped>
  .active {
    background-color: #4381E6;
  }

  .none {
    background-color: #2E323E;
  }

  .active2 {
    border-bottom: 1px solid #4381E6;
    padding-bottom: 7px;
  }

  .none2 {
    border-bottom: 0px;
  }

  .none2:hover {
    cursor: pointer;
    border-bottom: 1px solid #4381E6;
    padding-bottom: 7px;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    margin: 0 auto;
  }

  .logo {
    width: 65px;
    height: 65px;
    margin-top: 8px;
  }

  .menu-top, .menu-top-right {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
  }

  .menu-top-right {
    width: 98%;
    justify-content: space-between;
  }

  .logo-text {
    width: 386px;
    height: 36px;
    margin: 31px 15px;
    line-height: 36px;
  }

  .s1, .s2, .s3 {
    font-size: 24px;
    font-family: "微软雅黑";
  }

  .s1 {
    color: #1772FF;
  }

  .s2 {
    color: #DA5A97;
  }

  .s3 {
    color: #000000;
  }

  .mid-right {
    width: 222px;
    height: 26px;
    margin-top: 36px;
    display: flex;
    flex-direction: row;
  }

  #btn-cn2 {
    background-color: #EDEDED;
    color: #333333;
  }

  #btn-cn:hover, #btn-cn2:hover, .btn-sub:hover {
    cursor: pointer;
  }

  .shu {
    height: 26px;
    width: 1px;
    border-left: 1px #979797 solid;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
  }

  .menu {
    width: 1920px;
    height: 60px;
    background: #2E323E;
    margin: 0 auto;
  }

  .ul1 {
    margin-left: 70px;
    list-style: none;
  }

  .ul1 li {
    float: left;
    width: 136px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #FFFFFF;
    font-size: 20px;
  }

  .ul1 li:hover {
    background-color: #4A90E2;
    cursor: pointer;
  }

  .li1 {
    background: #4381E6;
  }

  #main1, #main2, #main3 {
    width: 100%;
    height: 700px;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .main-middle1, .main-middle2, .main-middle3 {
    width: 1170px;
    margin-top: 47px;
  }

  .main-middle2, .main-middle3 {
    height: 500px;
    display: flex;
    flex-direction: row;
  }

  #main2 {
    height: 580px;
  }

  #main3 {
    height: 560px;
  }

  .description, .descrip, .descrip2 {
    width: 806px;
    height: 28px;
  }

  .descrip2 {
    margin-top: 15px;
  }

  .s4, .s5, .s13 {
    font-size: 20px;
    color: #2E323E;
    font-family: "微软雅黑";
  }

  .s4 {
    font-weight: 500;
  }

  .s5, .s13 {
    color: #A8A8A8;
  }

  .main-mid, .main-mad {
    width: 1170px;
    height: 600px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
  }

  .main-mad {
    width: 280px;
    height: 400px;
    margin-top: 0px;
  }

  .main-left {
    width: 280px;
  }

  .main-right {
    width: 642px;
    height: 402px;
    display: flex;
    flex-direction: column;
    margin-left: 157px;
  }

  .video-d {
    width: 642px;
    height: 361px;
    margin-top: 21px;
  }

  #myvideo {
    width: 642px;
    height: 361px;
  }

  .d1 {
    width: 215px;
    height: 300px;
    display: flex;
    flex-direction: column;
  }

  .img1 {
    width: 215px;
    height: 215px;
  }

  .p1 {
    width: 170px;
    height: 28px;
    font-size: 20px;
    color: #2E323E;
    margin-top: 15px;
  }

  a {
    margin-top: 10px;
    font-size: 20px;
    color: #4A90E2;
  }

  .footer {
    width: 100%;
    height: 463px;
    background: #2E323E;
    padding-top: 51px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .footer-main {
    width: 1170px;
    display: flex;
    flex-direction: row;
  }

  .foot-left {
    width: 306px;
    height: 225px;
  }

  .p2, .p3 {
    width: 48px;
    height: 33px;
    font-size: 24px;
    color: #FFFFFF;
    font-family: "微软雅黑";
  }

  .p3 {
    width: 235px;
    height: 25px;
    margin-top: 22px;
    font-size: 18px;
    font-family: "微软雅黑";
  }

  .p4, .p5, .p6 {
    width: 396px;
    height: 20px;
    margin-top: 19px;
    font-size: 14px;
    color: #7E8392;
    font-family: "微软雅黑";
  }

  .p5 {
    width: 137px;
    height: 20px;
    margin-top: 8px;
  }

  .p6 {
    width: 130px;
    height: 20px;
    margin-top: 8px;
  }

  .p7 {
    margin-top: 15px;
  }

  #foot-right1, #foot-right2 {
    width: 634px;
    height: 320px;
    margin-left: 134px;
    display: flex;
    flex-direction: column;
    margin-top: 54px;
  }

  .top-text {
    width: 644px;
    height: 25px;
  }

  .s6, .s7, .s8, .s9, .s10, .s11, .s12 {
    display: inline-block;
    width: 54px;
    height: 25px;
    font-size: 18px;
    color: #7E8392;
    font-family: "微软雅黑";
  }

  .s7, .s9, .s11, .d6 {
    width: 101px;
    margin-left: 10px;
    background: #2E323E;
    border: none;
  }

  .s8 {
    margin-left: 53px;
  }

  .s9 {
    width: 139px;
    margin-left: 10px;
  }

  .s10 {
    width: 55px;
    margin-left: 14px;
  }

  .s11 {
    width: 101px;
    margin-left: 10px;
  }

  .s12 {
    width: 220px;
  }

  .mid-xian {
    width: 634px;
    height: 2px;
    margin-top: 10px;
  }

  .xian1, .xian2, .xian3 {
    width: 199px;
    border-top: 2px #6A6F7D solid;
    display: inline-block;
  }

  .xian2, .xian3 {
    margin-left: 13px;
  }

  .d5, .d6 {
    width: 54px;
    height: 25px;
    font-size: 18px;
    color: #7E8392;
    margin-top: 54px;
    font-family: "微软雅黑";
  }

  .d6 {
    width: 564px;
    height: 80px;
    margin-left: 60px;
    margin-top: -20px;
  }

  .d7 {
    width: 633px;
    border-top: 2px solid #7E8392;
    margin-top: 8px;
  }

  .d8 {
    display: flex;
    flex-direction: row;
  }

  .d8, #d9 {
    width: 400px;
    height: 25px;
    margin-top: 15px;
    font-size: 20px;
    color: #393D49;
    font-family: "微软雅黑";
  }

  #d9 {
    margin-top: 0px;
  }

  .btn-sub, .mybtn-sub {
    width: 126px;
    height: 30px;
    border: 1px solid #7E8392;
    color: #7E8392;
    font-size: 14px;
    margin-top: 42px;
    background-color: #2E323E;
    font-family: "微软雅黑";
  }

  .ulGods, .ul2 {
    list-style: none;
  }

  .ulGods li {
    float: left;
    margin-right: 73px;
  }

  .ul2 li {
    width: 388px;
    height: 25px;
    font-size: 20px;
    color: #393D49;
    margin-top: 18px;
    font-family: "微软雅黑";
    display: flex;
    flex-direction: row;
  }

  .ul2 li:hover {
    cursor: pointer;
  }

  .span-text:hover {
    border-bottom: 1px solid #4381E6;
    padding-bottom: 7px;
  }

  .span-text {
    text-decoration: none;
    color: #393D49;
  }

  .ul2 img {
    width: 16px;
    height: 12px;
  }

  #main3 img {
    width: 20px;
    height: 20px;
  }

  #main3 span {
  }

  .bg-login {
    width: 667px;
    height: 446px;
    margin-left: 27px;
    margin-top: 8px;
  }

  .bg-login img {
    width: 667px;
    height: 446px;
  }

  .videoname-t {
    position: relative;
    top: -1px;
    left: 8px;
  }

  .videoname-n {
    margin-left: 8px;
    margin-top: 1px;
  }

  .videoname:hover {
    cursor: pointer;
    border-bottom: 1px solid #4381E6;
    padding-bottom: 7px;
  }

  .mid-input {
    width: 600px;
    height: 36px;
    margin-top: 12px;
  }

  .input-text1, .input-text2, .textarea-input {
    width: 288px;
    height: 34px;
    background: #2E323E;
    border: 1px solid #727785;
    text-indent: 10px;
    font-size: 14px;
    color: #7E8392;
    font-family: "微软雅黑";
  }

  .input-text2 {
    margin-left: 15px;
  }

  .mytextarea {
    width: 600px;
    height: 147px;
    margin-top: 20px;
  }

  .textarea-input {
    width: 598px;
    height: 145px;
    padding-top: 10px;
  }

  .mybtn {
    width: 600px;
    height: 50px;
  }

  .mybtn-sub {
    width: 600px;
    height: 48px;
    margin-top: 18px;
    background: #727785;
    font-size: 20px;
    color: #FFFFFF;
    font-family: "微软雅黑";
  }

  .mybtn-sub:hover {
    cursor: pointer;
  }

  .ulGods img {
    width: 215px;
    height: 215px;
  }

  .tips {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    position: fixed;
    top: 0;
    left: 40%;
    width: auto;
    height: 65px;
    z-index: 99;

  }

  .tips img {
    width: 30px;
    height: 30px;
    position: relative;
    margin-top: 18px;
    margin-left: 66px;
  }

  .tips span {
    font-size: 15px;
    color: #3C3C3C;
    letter-spacing: -0.05px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    top: -8px;
    margin-left: 13px;
    padding-right: 66px;
  }

  .top-tabs-btn-active {
    background: #4381E6;
  }

  .top-tabs-btn {
    background: #2E323E;
  }

  .culture-text-active {
    background: #4381E6;
    color: #FFFFFF;;
  }

  .culture-text {
    display: block;
    text-align: center;
    width: 78px;
    height: 26px;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    padding-top: 3px;
    font-family: "微软雅黑";
  }

  .culture-text:hover {
    cursor: pointer;
  }

  .text-none {
    background-color: #EDEDED;
    color: #333333;
  }
</style>
